<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">详情</label>
				</van-nav-bar>
			</header>
			<section>
				<van-swipe :autoplay="1000" indicator-color="white" style="width: 100%;">

					<van-swipe-item v-for="(img, index) in imgs">
						<img :src="img.src" onerror="this.src='../../img/mai5.jpg'" style="width: 100%;">

					</van-swipe-item>
				</van-swipe>
				<van-cell-group>
					<van-row>
						<van-col span="24" id="txt-padding">
							<b id="b-font">{{detail.Name}} </b>
							</<van-col>
					</van-row>
					<van-row>
						<b>
							<div style="color: red;margin-left: 10px;font-size: 18px;">￥:{{price}}</div>

						</b>
					</van-row>
					<van-cell>
						<van-col span="8" style="color: #C8C9CC;">快递：免运费</van-col>
						<van-col span="7" style="color: #C8C9CC;">销量：{{SaleCount}}</van-col>
						<van-col span="8" style="color: #C8C9CC;">{{BrowseCount}}次浏览</van-col>
					</van-cell>
				</van-cell-group>
				<van-cell-group>
					<van-cell style="background-color:#F2F3F5">
						<van-col span="8" style="color: #FF0000;">☞正品保证</van-col>
						<van-col span="8" style="color: #FF0000;">☞极速退款</van-col>
						<van-col span="8" style="color: #FF0000;">☞两天内发货</van-col>
					</van-cell>
					<van-cell style="background-color: #E5E5E5;">
					</van-cell>
				</van-cell-group>
				<div style="height: 15px;background-color: #E8E8E8;"></div>
				<van-panel title="商品详情">
					<van-list>
						<van-cell-swipe v-for="xq in XQ">
							<van-cell>
								<img :src="xq" onerror="this.src='../../img/mai5.jpg'" style="width: 100%;" />
							</van-cell>
						</van-cell-swipe>
					</van-list>
				</van-panel>

			</section>
			<footer>
				<van-goods-action>
					<van-goods-action-mini-btn icon="like-o" text="收藏" @click="joinCollection"></van-goods-action-mini-btn>
					<van-goods-action-big-btn @click="gouwuche" text="加入购物车"></van-goods-action-big-btn>
					<van-goods-action-big-btn primary text="立即购买" @click="pay">
						</van-goods-action-mini-btn>
				</van-goods-action>
			</footer>
		</div>
		<script>
			var key = localStorage.getItem("key");
			var vm = new Vue({
				el: "#app",
				data: {
					phone: "",
					pid: 0,
					price: "",
					detail:"",
					SaleCount: "",
					BrowseCount: "",
					imgs: [],
					XQ: ["../img/dt_1.png", "../img/dt_2.png", "../img/dt_3.png", "../img/dt_4.png", "../img/dt_5.png"]
				},
				methods: {
					onClickLeft: function() {
						var arr = plus.webview.currentWebview(); //获取当前视图
						plus.webview.close(arr); //关闭当前视图/
					},
					pay: function() {
						if (key == null) {
							plus.webview.create("Login.html", "login").show();
						} else {
							plus.webview.create("Wmiddle.html", "pay", {}, {
								pid: this.pid,
								isShow: true,
								address: true
							}).show();
						}
					},
					//收藏
					joinCollection: function() {
						var a = plus.webview.currentWebview();
						ajax({
							url: "http://dsapi.ysd3g.com/API/CollectGoods",
							dataType: "jsonp",
							data: {
								goodsId: a.nId, //传id
								key: localStorage.getItem("key") //传key
							},
							success: function(res) {
								if (res.Error == false) {
									vm.$toast.success("收藏成功");
								} else {
									vm.$toast.fail(res.Msg);
								}
							},
						});
					},
					//购物车
					gouwuche() { //添加购物车
						if (key == null) {
							plus.webview.create("Login.html", "login").show();
						} else {
							vm.$toast.success("加入购物车");
							vm.phone = JSON.parse(localStorage.getItem("userData")).Phone;
							var goodsArr = [{
								goodsId: vm.detail.Id,
								buyCount: 1
							}];
							var goodsObj = {
								goodsId: vm.detail.Id,
								buyCount: 1
							};
							var newArr;
							if (localStorage.getItem(vm.phone) == null) { //如果购物车里面没有任何东西
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
								vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							} else { //购物车里有东西
								newArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车里面的商品
								for (var i = 0; i < newArr.length; i++) { //遍历购物车
									if (newArr[i].goodsId == vm.detail.Id) { //如果购物车里面有此商品
										newArr[i].buyCount += 1; //商品数量+1
										localStorage.removeItem(vm.phone);
										localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
										vm.addShopcartCount = newArr[i].buyCount; //显示此商品在购物车内的数量
										return;
									}
								}
								//购物车里没有此商品
								newArr.push(goodsObj); //向购物车内添加商品
								localStorage.removeItem(vm.phone);
								localStorage.setItem(vm.phone, JSON.stringify(newArr)); //
								vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							}
							plus.webview.getWebviewById("shop").reload()
						}
					}
				},
				mounted() {
					var a = plus.webview.currentWebview();
					this.name = a.lisname;
					this.SaleCount = a.liscount;
					this.price = a.lisprice;
					this.BrowseCount = a.BrowseCount;
					ajax({
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: a.nId
						},
						success: function(res) {
							vm.detail=res.Detail;
							vm.imgs = res.Detail.SwipeImages;
						}
					})
				}
			})
		</script>
	</body>
</html>
